<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model.trim="content"  @keyup.enter="add"/>
	</header>
</template>

<script>
	export default {
		data(){
			return {
				content:''
			}
		},
		props:['arr'],
		methods:{
			add(){
				if(this.content.length===0){
					return alert('请输入内容')
				}
			this.$emit('add',this.content)
			//清空
			this.content=''
			}
		},
		computed:{
			isAll:{
				set(checked){
					this.arr.forEach(item=>item.isDone=checked)
				},
				get(){
					return this.arr.length!==0 && this.arr.every(item=>item.isDone)
				}
			}
		}
	}
</script>
